<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="x-UA-Compatible" content="ie=Edge">
   	<meta name="viewport" content="width=device-width, initial-scale=1">
   	<title>Crafty - Crafty.WebGLShader</title>
	<link type="text/css" rel="stylesheet" href="../craftyjs-site.css" />
	<link rel="shortcut icon" href="../favicon.ico">
</head>
<body>
	<div id = "header-background"> </div>
	<div id = "page-frame">
	<div id="header">
		<nav class="navbar">
  			<div class="container-fluid">
  				<div class="navbar-header">
  					<a class="navbar-brand" href="../"> <img class="logo" src="../images/text-logo.png" /> </a>
  					
				</div>
				<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li><a href="../">首页</a></li>
						<li><a href="../getting-started/">快速开始</a></li>
						<li><a href="../documentation/">文档</a></li>
						<li><a href="../api/">API</a></li>
						<li><a href="../components/">组件</a></li>
						<li class="emph"><a href="../#install">下载</a></li>
					</ul>
				</div>
			</div>
		</nav>
	</div>


	<div id="main">
		<div id="content" class="container">
			



<div id="docs"><div class="toc-holder" id="doc-nav"><ul id="doc-level-one"><li><a href="events.html">List of Events</a></li><li class="category">Core<ul class="category-list"><li><a href="Crafty.html">Crafty</a></li><li><a href="Crafty Core.html">Crafty Core</a></li><li><a href="Crafty-bind.html">Crafty.bind()</a></li><li><a href="Crafty-c.html">Crafty.c()</a></li><li><a href="Crafty-clone.html">Crafty.clone()</a></li><li><a href="Crafty-defineField.html">Crafty.defineField()</a></li><li><a href="Crafty-e.html">Crafty.e()</a></li><li><a href="Crafty-extend.html">Crafty.extend()</a></li><li><a href="Crafty-frame.html">Crafty.frame()</a></li><li><a href="Crafty-getVersion.html">Crafty.getVersion()</a></li><li><a href="Crafty-init.html">Crafty.init()</a></li><li><a href="Crafty-isPaused.html">Crafty.isPaused()</a></li><li><a href="Crafty-one.html">Crafty.one()</a></li><li><a href="Crafty-pause.html">Crafty.pause()</a></li><li><a href="Crafty-s.html">Crafty.s()</a></li><li><a href="Crafty-settings.html">Crafty.settings</a></li><li><a href="Crafty-stage.html">Crafty.stage</a></li><li><a href="Crafty-stop.html">Crafty.stop()</a></li><li><a href="Crafty-support.html">Crafty.support</a></li><li><a href="Crafty-trigger.html">Crafty.trigger()</a></li><li><a href="Crafty-unbind.html">Crafty.unbind()</a></li><li><a href="Crafty-uniqueBind.html">Crafty.uniqueBind()</a></li></ul></li><li class="category">2D<ul class="category-list"><li><a href="2D.html">2D</a></li><li><a href="AngularMotion.html">AngularMotion</a></li><li><a href="Collision.html">Collision</a></li><li><a href="Crafty-circle.html">Crafty.circle</a></li><li><a href="Crafty-diamondIso.html">Crafty.diamondIso</a></li><li><a href="Crafty-HashMap.html">Crafty.HashMap</a></li><li><a href="Crafty-isometric.html">Crafty.isometric</a></li><li><a href="Crafty-map.html">Crafty.map</a></li><li><a href="Crafty-math-Matrix2D.html">Crafty.math.Matrix2D</a></li><li><a href="Crafty-math-Vector2D.html">Crafty.math.Vector2D</a></li><li><a href="Crafty-polygon.html">Crafty.polygon</a></li><li><a href="Crafty-raycast.html">Crafty.raycast()</a></li><li><a href="Crafty-rectManager.html">Crafty.rectManager</a></li><li><a href="Gravity.html">Gravity</a></li><li><a href="GroundAttacher.html">GroundAttacher</a></li><li><a href="Motion.html">Motion</a></li><li><a href="Supportable.html">Supportable</a></li></ul></li><li class="category">Animation<ul class="category-list"><li><a href="Crafty-easing.html">Crafty.easing</a></li><li><a href="SpriteAnimation.html">SpriteAnimation</a></li><li><a href="Tween.html">Tween</a></li></ul></li><li class="category">Assets<ul class="category-list"><li><a href="Crafty-asset.html">Crafty.asset()</a></li><li><a href="Crafty-assets.html">Crafty.assets</a></li><li><a href="Crafty-imageWhitelist.html">Crafty.imageWhitelist()</a></li><li><a href="Crafty-load.html">Crafty.load()</a></li><li><a href="Crafty-paths.html">Crafty.paths()</a></li><li><a href="Crafty-removeAssets.html">Crafty.removeAssets()</a></li></ul></li><li class="category">Audio<ul class="category-list"><li><a href="Crafty-audio.html">Crafty.audio</a></li></ul></li><li class="category">Controls<ul class="category-list"><li><a href="Controllable.html">Controllable</a></li><li><a href="Controls.html">Controls</a></li><li><a href="Draggable.html">Draggable</a></li><li><a href="Fourway.html">Fourway</a></li><li><a href="Jumper.html">Jumper</a></li><li><a href="Multiway.html">Multiway</a></li><li><a href="Twoway.html">Twoway</a></li></ul></li><li class="category">Debug<ul class="category-list"><li><a href="Crafty-error.html">Crafty.error()</a></li><li><a href="Crafty-log.html">Crafty.log()</a></li><li><a href="DebugCanvas.html">DebugCanvas</a></li><li><a href="DebugPolygon.html">DebugPolygon</a></li><li><a href="DebugRectangle.html">DebugRectangle</a></li><li><a href="SolidAreaMap.html">SolidAreaMap</a></li><li><a href="SolidHitBox.html">SolidHitBox</a></li><li><a href="VisibleMBR.html">VisibleMBR</a></li><li><a href="WiredAreaMap.html">WiredAreaMap</a></li><li><a href="WiredHitBox.html">WiredHitBox</a></li></ul></li><li class="category">Events<ul class="category-list"><li><a href="Crafty-addEvent.html">Crafty.addEvent()</a></li><li><a href="Crafty-bind.html">Crafty.bind()</a></li><li><a href="Crafty-one.html">Crafty.one()</a></li><li><a href="Crafty-removeEvent.html">Crafty.removeEvent()</a></li><li><a href="Crafty-trigger.html">Crafty.trigger()</a></li><li><a href="Crafty-unbind.html">Crafty.unbind()</a></li><li><a href="Crafty-uniqueBind.html">Crafty.uniqueBind()</a></li></ul></li><li class="category">Game Loop<ul class="category-list"><li><a href="Crafty-timer.html">Crafty.timer</a></li></ul></li><li class="category">Graphics<ul class="category-list"><li><a href="Canvas.html">Canvas</a></li><li><a href="CanvasLayer.html">CanvasLayer</a></li><li><a href="Color.html">Color</a></li><li><a href="Crafty-assignColor.html">Crafty.assignColor()</a></li><li><a href="Crafty-background.html">Crafty.background()</a></li><li><a href="Crafty-createLayer.html">Crafty.createLayer()</a></li><li><a href="Crafty-defaultShader.html">Crafty.defaultShader()</a></li><li><a href="Crafty-domHelper.html">Crafty.domHelper</a></li><li><a href="Crafty-pixelart.html">Crafty.pixelart()</a></li><li><a href="Crafty-sprite.html">Crafty.sprite()</a></li><li><a href="Crafty-WebGLShader.html">Crafty.WebGLShader()</a></li><li><a href="DOM.html">DOM</a></li><li><a href="DomLayer.html">DomLayer</a></li><li><a href="HTML.html">HTML</a></li><li><a href="Image.html">Image</a></li><li><a href="Particles.html">Particles</a></li><li><a href="Renderable.html">Renderable</a></li><li><a href="Sprite.html">Sprite</a></li><li><a href="Text.html">Text</a></li><li><a href="WebGL.html">WebGL</a></li><li><a href="WebGLLayer.html">WebGLLayer</a></li></ul></li><li class="category">Input<ul class="category-list"><li><a href="AreaMap.html">AreaMap</a></li><li><a href="Button.html">Button</a></li><li><a href="Crafty-findPointerEventTargetByComponent.html">Crafty.findPointerEventTargetByComponent()</a></li><li><a href="Crafty-keyboardDispatch.html">Crafty.keyboardDispatch()</a></li><li><a href="Crafty-keydown.html">Crafty.keydown</a></li><li><a href="Crafty-keys.html">Crafty.keys</a></li><li><a href="Crafty-lastEvent.html">Crafty.lastEvent</a></li><li><a href="Crafty-mouseButtons.html">Crafty.mouseButtons</a></li><li><a href="Crafty-mouseDispatch.html">Crafty.mouseDispatch()</a></li><li><a href="Crafty-mouseWheelDispatch.html">Crafty.mouseWheelDispatch()</a></li><li><a href="Crafty-multitouch.html">Crafty.multitouch()</a></li><li><a href="Crafty-selected.html">Crafty.selected</a></li><li><a href="Crafty-touchDispatch.html">Crafty.touchDispatch()</a></li><li><a href="Keyboard.html">Keyboard</a></li><li><a href="Mouse.html">Mouse</a></li><li><a href="MouseDrag.html">MouseDrag</a></li><li><a href="Touch.html">Touch</a></li></ul></li><li class="category">Misc<ul class="category-list"><li><a href="Crafty-addEvent.html">Crafty.addEvent()</a></li><li><a href="Crafty-device.html">Crafty.device</a></li><li><a href="Crafty-removeEvent.html">Crafty.removeEvent()</a></li><li><a href="Crafty-support.html">Crafty.support</a></li></ul></li><li class="category">Model<ul class="category-list"><li><a href="Model.html">Model</a></li></ul></li><li class="category">Scenes<ul class="category-list"><li><a href="Crafty-scene.html">Crafty.scene()</a></li></ul></li><li class="category">Stage<ul class="category-list"><li><a href="Crafty-background.html">Crafty.background()</a></li><li><a href="Crafty-scene.html">Crafty.scene()</a></li><li><a href="Crafty-viewport.html">Crafty.viewport</a></li></ul></li><li class="category">Utilities<ul class="category-list"><li><a href="Crafty-math.html">Crafty.math</a></li><li><a href="Delay.html">Delay</a></li><li><a href="Storage.html">Storage</a></li></ul></li></ul></div><div id="doc-content" class="doc-page-holder"><div class="doc-page"><h1>Crafty.WebGLShader() <span></span></h1><div class="doclet" id="Crafty-WebGLShader"><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">Crafty.WebGLShader </span><span class="sig-noun">Crafty.WebGLShader</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-qualifier">String </span><span class="sig-noun">vertexShaderCode</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">String </span><span class="sig-noun">fragmentShaderCode</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Array </span><span class="sig-noun">attributeList</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Function </span><span class="sig-noun">drawCallback</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-noun">e</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-noun">entity</span></span><span class="sig-seperator">))</span></code><dl class="parameter"><dt> vertexShaderCode </dt><dd><span class="markdown"><p>GLSL code for the vertex shader</p>
</span></dd></dl><dl class="parameter"><dt> fragmentShaderCode </dt><dd><span class="markdown"><p>GLSL code for the fragment shader</p>
</span></dd></dl><dl class="parameter"><dt> attributeList </dt><dd><span class="markdown"><p>List of variable names with their vertex length</p>
</span></dd></dl><dl class="parameter"><dt> drawCallback </dt><dd><span class="markdown"><p>Function that pushes all attribute values to WebGL.</p>
</span></dd></dl></div><span class="markdown"><p>Assigns or fetches a default shader for a component.</p>
<p>This allows the default shader for a component to be overridden, and therefor allows
developers to override the default shader behaviour with more complex shaders.</p>
</span><div class="example"><h4>Example</h4><span class="markdown"><p>Let&#39;s say we want to extend sprite to draw the images in grayscale when we
set a <code>grayscale: true</code> attribute.</p>
<pre><code class="hljs "><span class="hljs-keyword">var</span> recoloredSprite = <span class="hljs-keyword">new</span> Crafty.WebGLShader(
  <span class="hljs-comment">// The vertex shader</span>
  <span class="hljs-string">"attribute vec2 aPosition;\n"</span> +
  <span class="hljs-string">"attribute vec3 aOrientation;\n"</span> +
  <span class="hljs-string">"attribute vec2 aLayer;\n"</span> +
  <span class="hljs-string">"attribute vec2 aTextureCoord;\n"</span> +
  <span class="hljs-string">"attribute vec2 aGrayscale;\n"</span> + <span class="hljs-comment">// Addition of our grayscale</span>
  <span class="hljs-string">"varying mediump vec3 vTextureCoord;\n"</span> +
  <span class="hljs-string">"varying mediump vec2 vGrayscale;\n"</span> + <span class="hljs-comment">// passing attribute to fragment shader</span>
  <span class="hljs-string">"uniform vec4 uViewport;\n"</span> +
  <span class="hljs-string">"uniform mediump vec2 uTextureDimensions;\n"</span> +
  <span class="hljs-string">"mat4 viewportScale = mat4(2.0 / uViewport.z, 0, 0, 0,    0, -2.0 / uViewport.w, 0,0,    0, 0,1,0,    -1,+1,0,1);\n"</span> +
  <span class="hljs-string">"vec4 viewportTranslation = vec4(uViewport.xy, 0, 0);\n"</span> +
  <span class="hljs-string">"void main() {\n"</span> +
  <span class="hljs-string">"  vec2 pos = aPosition;\n"</span> +
  <span class="hljs-string">"  vec2 entityOrigin = aOrientation.xy;\n"</span> +
  <span class="hljs-string">"  mat2 entityRotationMatrix = mat2(cos(aOrientation.z), sin(aOrientation.z), -sin(aOrientation.z), cos(aOrientation.z));\n"</span> +
  <span class="hljs-string">"  pos = entityRotationMatrix * (pos - entityOrigin) + entityOrigin ;\n"</span> +
  <span class="hljs-string">"  gl_Position = viewportScale * (viewportTranslation + vec4(pos, 1.0/(1.0+exp(aLayer.x) ), 1) );\n"</span> +
  <span class="hljs-string">"  vTextureCoord = vec3(aTextureCoord, aLayer.y);\n"</span> +
  <span class="hljs-string">"  vGrayscale = aGrayscale;\n"</span> + <span class="hljs-comment">// Assigning the grayscale for fragment shader</span>
  <span class="hljs-string">"}"</span>,
  <span class="hljs-comment">// The fragment shader</span>
  <span class="hljs-string">"precision mediump float;\n"</span> +
  <span class="hljs-string">"varying mediump vec3 vTextureCoord;\n"</span> +
  <span class="hljs-string">"varying mediump vec2 vGrayscale;\n"</span> +
  <span class="hljs-string">"uniform sampler2D uSampler;\n "</span> +
  <span class="hljs-string">"uniform mediump vec2 uTextureDimensions;\n"</span> +
  <span class="hljs-string">"void main() {\n"</span> +
  <span class="hljs-string">"  highp vec2 coord =   vTextureCoord.xy / uTextureDimensions;\n"</span> +
  <span class="hljs-string">"  mediump vec4 base_color = texture2D(uSampler, coord);\n"</span> +
  <span class="hljs-string">"  if (vGrayscale.x == 1.0) {\n"</span> +
  <span class="hljs-string">"    mediump float lightness = (0.2126*base_color.r + 0.7152*base_color.g + 0.0722*base_color.b);\n"</span> +
  <span class="hljs-string">"    lightness *= base_color.a * vTextureCoord.z; // Premultiply alpha\n"</span> +
  <span class="hljs-string">"    gl_FragColor = vec4(lightness, lightness, lightness, base_color.a*vTextureCoord.z);\n"</span> +
  <span class="hljs-string">"  } else {\n"</span> +
  <span class="hljs-string">"    gl_FragColor = vec4(base_color.rgb*base_color.a*vTextureCoord.z, base_color.a*vTextureCoord.z);\n"</span> +
  <span class="hljs-string">"  }\n"</span> +
  <span class="hljs-string">"}"</span>,
  [
    { <span class="hljs-attr">name</span>: <span class="hljs-string">"aPosition"</span>,     <span class="hljs-attr">width</span>: <span class="hljs-number">2</span> },
    { <span class="hljs-attr">name</span>: <span class="hljs-string">"aOrientation"</span>,  <span class="hljs-attr">width</span>: <span class="hljs-number">3</span> },
    { <span class="hljs-attr">name</span>: <span class="hljs-string">"aLayer"</span>,        <span class="hljs-attr">width</span>: <span class="hljs-number">2</span> },
    { <span class="hljs-attr">name</span>: <span class="hljs-string">"aTextureCoord"</span>, <span class="hljs-attr">width</span>: <span class="hljs-number">2</span> },
    { <span class="hljs-attr">name</span>: <span class="hljs-string">"aGrayscale"</span>,    <span class="hljs-attr">width</span>: <span class="hljs-number">2</span> }
  ],
  <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e, entity</span>) </span>{
    <span class="hljs-keyword">var</span> co = e.co;
    <span class="hljs-comment">// Write texture coordinates</span>
    e.program.writeVector(<span class="hljs-string">"aTextureCoord"</span>,
      co.x, co.y,
      co.x, co.y + co.h,
      co.x + co.w, co.y,
      co.x + co.w, co.y + co.h
    );
    <span class="hljs-comment">// Write our grayscale attribute</span>
    e.program.writeVector(<span class="hljs-string">"aGrayscale"</span>,
      entity.grayscale ? <span class="hljs-number">1.0</span> : <span class="hljs-number">0.0</span>,
      <span class="hljs-number">0.0</span>
    );
  }
);</code></pre><p>It seems like a lot of work, but most of the above code is the default Crafty shader code.
When you get the hang of it, it is really easy to extend for your own effects. And remember
you only need to write it once, and suddenly all sprite entities have extra effects available.</p>
</span></div><div><h4>See Also</h4><ul class="see-also-list"><li><a href="Crafty-defaultShader.html">Crafty.defaultShader</a></li><li><a href="Sprite.html">Sprite</a></li><li><a href="Image.html">Image</a></li><li><a href="Color.html">Color</a></li><li><a href="WebGL.html">WebGL</a></li></ul></div></div></div></div></div>
			
		</div>
	</div>
	<div class="clearer"></div>
	<div id="footer">
		<div id="contact">
			<a href="https://groups.google.com/forum/#!forum/craftyjs">
				<img src="../images/google.png" />
				google groups</a>
			<a href="mailto:starwed@gmail.com">
				<img src="../images/email.png" />
				starwed@gmail.com</a>
			<a href="https://github.com/craftyjs/Crafty">
				<img src="../images/github.png" />
				github</a>
		</div>
		<ul>
			<li><a href="../">首页</a></li>
				<li><a href="../getting-started/">快速开始</a></li>
				<li><a href="../documentation/">文档</a></li>
				<li><a href="../api/">API</a></li>
				<li><a href="../components/">组件</a></li>
				<li class="emph"><a href="../#install">下载</a></li>
		</ul>
		<p>
			&copy; Crafty 2010-2015. Crafty is distributed under the <a href="http://en.wikipedia.org/wiki/MIT_License">MIT License</a>.
		</p>
	</div>
</div>
</body>
</html>
